<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<div class="list-table">
	<h2>Lịch sử giao dịch</h2>

	<form id="form" action="getBillHistory" method="post">
		<table id="ver-zebra">
			<colgroup>
				<col class="vzebra-odd" />
				<col class="vzebra-even" />
				<col class="vzebra-odd" />
				<col class="vzebra-even" />
			</colgroup>
			<tbody>
				<tr>
					<td><label>Chọn sân</label></td>
					<td colspan="3"><select name="soccerFieldId"
						id="soccerFieldId">
							<s:if test="#session.user.role.id == 2">
								<option value="0">Tất cả</option>
							</s:if>
							<s:iterator value="listSoccerField">
								<s:if test="status">
									<option value="<s:property value='id'/>"
										<s:if test="id == soccerFieldId"> selected="selected"  </s:if>><s:property
											value="name" />
									</option>
								</s:if>
							</s:iterator>
					</select></td>
				</tr>

				<tr>
					<td><label>Từ ngày</label></td>
					<td><input id="tu_ngay" name="tu_ngay" type="text"
						placeholder="dd/mm/yyyy" readonly="readonly"
						value='<s:property value="tu_ngay"/>' required="required" /></td>
					<td><label>Tới ngày</label></td>
					<td><input id="toi_ngay" name="toi_ngay" type="text"
						placeholder="dd/mm/yyyy" readonly="readonly" required="required"
						value='<s:property value="toi_ngay"/>' /></td>
				</tr>
				<tr>
					<td></td>
					<td colspan="3"><input type="submit" value="Xem" /></td>
				</tr>
			</tbody>
		</table>
	</form>

	<h2>Danh sách hóa đơn</h2>
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
		</colgroup>
		<thead>
			<tr>
				<th scope="col" id="vzebra-adventure">Mã hóa đơn</th>
				<th scope="col" id="vzebra-adventure">Tên sân</th>
				<th scope="col" id="vzebra-adventure">Ngày bắt đầu</th>
				<th scope="col" id="vzebra-adventure">Ngày kết thúc</th>
				<th scope="col" id="vzebra-adventure">Khung giờ</th>
				<th scope="col" id="vzebra-adventure">Ngày hủy</th>
				<th scope="col" id="vzebra-adventure">Xem hóa đơn</th>
			</tr>
		</thead>
		<tbody>
			<s:if test="listSoccerOrder.isEmpty()">
				<tr>
					<td colspan="8">Chưa có dữ liệu</td>
				</tr>
			</s:if>
			<s:else>
				<s:iterator value="listSoccerOrder">
					<tr>
						<td><s:property value="orderNo" /></td>
						<td><s:property value="timeDivision.soccerField.name" /></td>
						<td><s:property value="getFormatDate(startDate)" /></td>
						<td><s:property value="getFormatDate(endDate)" /></td>
						<td><s:property value="timeDivision.period" /></td>
						<td><s:if test="!status">
								<s:property value="getFormatDate(cancel_date)" />
							</s:if></td>
						<td><input type="button" value="Xem hóa đơn"
							onclick="viewBill('<s:property value="id" />')" /></td>
					</tr>
				</s:iterator>
			</s:else>
		</tbody>
	</table>
</div>

<!-- Thông tin hóa đơn -->
<s:if test="orderId != 0">
	<div class="list-table" id="bill_section">
		<h2>Thông tin chi tiết hóa đơn</h2>
		<div id="bill_content">
			<div class="col1">Ngày xem</div>
			<div class="col2">
				<s:property value="tu_ngay" />
				tới
				<s:property value="toi_ngay" />
			</div>

			<div class="col1">Mã hóa đơn</div>
			<div class="col2">
				<s:property value="soccerOrder.orderNo" />
			</div>

			<div class="col1">Tên khách hàng</div>
			<div class="col2">
				<s:property value="soccerOrder.person.name" />
			</div>

			<div class="col1">Điện thoại</div>
			<div class="col2">
				<s:property value="soccerOrder.person.phone" />
			</div>

			<div class="col1">Email</div>
			<div class="col2">
				<s:property value="soccerOrder.person.email" />
			</div>

			<div class="col1">Địa chỉ</div>
			<div class="col2">
				<s:property value="soccerOrder.person.address" />
			</div>

			<div class="col1">Ngày bắt đầu</div>
			<div class="col2">
				<s:property value="getDateFormat(soccerOrder.startDate)" />
			</div>

			<div class="col1">Ngày kết thúc</div>
			<div class="col2">
				<s:property value="getDateFormat(soccerOrder.endDate)" />
			</div>

			<div class="col1">Khung giờ</div>
			<div class="col2">
				<s:property value="soccerOrder.timeDivision.period" />
			</div>

			<div class="col1">Trạng thái</div>
			<div class="col2">
				<s:if test="soccerOrder.cancel_date != null"> Đã hủy</s:if>
				<s:else>&nbsp;</s:else>
			</div>

			<div class="col1">Ngày hủy</div>
			<div class="col2">
				<s:if test="soccerOrder.cancel_date != null">
					<s:property value="getDateFormat(soccerOrder.cancel_date)" />
				</s:if>
				<s:else>&nbsp;</s:else>
			</div>

			<div class="col1">Giá thuê sân(VND)</div>
			<div class="col2">
				<s:property value="getPriceFormat(soccerOrder.timeDivision.price)" />
			</div>

			<div class="col1">Tổng tiền thuê(VND)</div>
			<div class="col2">
				<s:property value="getPriceFormat(totalSoccerOrder)" />
			</div>

			<div class="col1" style="font-weight: bold;">Dịch vụ khác:</div>

			<div class="col1">Tên dịch vụ</div>
			<div class="col2">Ngày thuê</div>
			<div class="col2">Đơn giá(VND)</div>
			<div class="col3">Số lượng</div>
			<div class="col4">Tổng tiền(VND)</div>
			
			<s:iterator value="listServiceOrder">
				<div class="col1">
					+
					<s:property value="service.name" />
				</div>
				<div class="col2">
					<s:property value="getDateFormat(ordered_date)" />
				</div>
				<div class="col2">
					<s:property value="getPriceFormat(unitPrice)" />
				</div>
				<div class="col3">
					<s:property value="number_items" />
				</div>
				<div class="col4">
					<s:property value="getPriceFormat(number_items*unitPrice)" />
				</div>
			</s:iterator>

			<div class="col1">&nbsp;</div>
			<div class="col2">&nbsp;</div>
			<div class="col2">&nbsp;</div>
			<div class="col3">&nbsp;</div>
			<div class="col4">
				<s:property value="getPriceFormat(totalServiceOrder)" />
			</div>

			<div class="col1" style="font-weight: bold;">Tổng tiền (VND)</div>
			<div class="col2">
				<s:property value="getPriceFormat(total)" />
			</div>

			<div class="col1" style="font-weight: bold;">Bằng chữ</div>
			<div class="col2">
				<s:property value="getWordsOfNumber(total)" />
			</div>

			<%-- <div class="col5">
				<input type="button"
					onclick="printBillPdf('<s:property value="orderId"/>')"
					value="In hóa đơn" />
			</div> --%>
		</div>
	</div>
</s:if>

<script type="text/javascript">
	function viewBill(soccerOrderId) {
		var tu_ngay = $('#tu_ngay').val();
		var toi_ngay = $('#toi_ngay').val();
		var soccerFieldId = $('#soccerFieldId').val();

		window.location.href = "getBillHistory?orderId=" + soccerOrderId
				+ "&tu_ngay=" + tu_ngay + "&toi_ngay=" + toi_ngay
				+ "&soccerFieldId=" + soccerFieldId;
	}

	$(function() {
		$("#tu_ngay").datepicker({
			changeMonth : true,
			changeYear : true,
			maxDate : new Date(),
			numberOfMonths : 1,
			onClose : function(selectedDate) {
				$("#toi_ngay").datepicker("option", "minDate", selectedDate);
			}
		});
		$("#toi_ngay").datepicker({
			changeMonth : true,
			changeYear : true,
			numberOfMonths : 1,
			maxDate : new Date(),
			onClose : function(selectedDate) {
				$("#tu_ngay").datepicker("option", "maxDate", selectedDate);
			}
		});

		$('#tu_ngay').datepicker($.datepicker.regional["vi-VN"]);
		$('#toi_ngay').datepicker($.datepicker.regional["vi-VN"]);

		$('#form').validate();

		$('#tu_ngay').change(function() {
			$('#form').validate().resetForm();
		});

		$('#toi_ngay').change(function() {
			$('#form').validate().resetForm();
		});
	});

	
</script>